<template>
  <div>
    <el-dialog title="编辑" :visible.sync="open" width="760px" class="dia-style">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="122px" @submit.native.prevent>
          <el-col :span="24">
            <el-form-item label="名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入名称" clearable :style="{ width: '100%' }" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="源类型" prop="type">
              <el-select v-model="formData.type" placeholder="请输入源类型" clearable :style="{ width: '100%' }">
                <el-option
                  v-for="(item, index) in typeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="源格式" prop="field103">
              <el-input v-model="formData.field103" placeholder="请输入源格式" clearable :style="{ width: '100%' }" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="目标类型" prop="target">
              <el-select v-model="formData.target" placeholder="请输入目标类型" clearable :style="{ width: '100%' }">
                <el-option
                  v-for="(item, index) in targetOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item label="目标格式" prop="field105">
              <el-input v-model="formData.field105" placeholder="请输入目标格式" clearable :style="{ width: '100%' }" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary">校验</el-button>
          </el-col>
          <el-col :span="24">
            <el-form-item label="多行文本" prop="field109">
              <el-input
                v-model="formData.field109"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }" />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      // 是否显示遮罩层
      open: false,

      formData: {
        name: undefined,
        type: undefined,
        field103: undefined,
        target: undefined,
        field105: undefined,
        field108: undefined,
        field109: undefined,
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          },
        ],
        type: [
          {
            required: true,
            message: '请输入源类型',
            trigger: 'change',
          },
        ],
        field103: [
          {
            required: true,
            message: '请输入源格式',
            trigger: 'blur',
          },
        ],
        target: [
          {
            required: true,
            message: '请输入目标类型',
            trigger: 'change',
          },
        ],
        field105: [
          {
            required: true,
            message: '请输入目标格式',
            trigger: 'blur',
          },
        ],
        field109: [
          {
            required: true,
            message: '请输入多行文本',
            trigger: 'blur',
          },
        ],
      },
      typeOptions: [
        {
          label: '字符串',
          value: 1,
        },
        {
          label: '长整型',
          value: 2,
        },
      ],
      targetOptions: [
        {
          label: '字符串',
          value: 1,
        },
        {
          label: '长整型',
          value: 2,
        },
      ],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate((valid) => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.resetForm()
    },
  },
}
</script>
<style></style>
